<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        ul li{
            border: 1px solid #ccc;
            width: 200px;
            list-style: none;
        }
        ul{
            display: none;
            position: absolute;
        }
        
    </style>
</head>
<body>
    <div></div>
    
    <ul>
        <li>菜单1</li>
        <li>菜单2</li>
        <li>菜单3</li>
        <li>菜单4</li>
        <li>菜单5</li>
    </ul>

    <script>
        document.querySelector('div').ondblclick=function()  //鼠标左键双击事件
        {
            this.style.backgroundColor='yellow'
        }
        var ul=document.querySelector("ul")
        document.oncontextmenu=function(e)  //鼠标右键单击事件
        {
            var x=e.clientX;   //获取盒子在文档中的坐标
            var y=e.clientY
            ul.style.left=x+'px'  
            ul.style.top=y+'px'
            ul.style.display='block'
            e.preventDefault()   //阻止浏览器的默认行为
        }
        ul.onclick=function(e)
        {
            alert(e.target.innerText)
            e.stopPropagation()  //阻止冒泡
        }
        document.onclick=function()
        {
            ul.style.display='none'
        }

    </script>
    
</body>
</html>